<template>
	<view>
		<view class="item themeBac cwhite f-c">
			<image src="../../static/my/icon_xgsjh.png" mode="widthFix"></image>
			<input type="tel" @input="inputMo" :value="mobile" :placeholder="time===1?'请输入旧手机号':'请输入新手机号'" />
		</view>

		<view class="item themeBac cwhite f-c">
			<image src="../../static/my/icon_yzm.png" mode="widthFix"></image>
			<input type="number" :value="code" @input="inputCode" placeholder="请输入验证码" />
			<view class="getCode" @click="getCode">{{tips}}</view>

			<u-toast ref="uToast"></u-toast>
			<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
			</u-verification-code>
		</view>

		<view class="btn">
			<button @click="toNext" class="themeBac cwhite">{{time===1?'下一步':'确定'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: "",
				seconds:60,
				mobile: "",
				code: "",
				time:1,
				realCode:''
			}
		},
		methods: {
			inputMo(v){
				this.mobile=v.detail.value
			},
			inputCode(v){
				this.code=v.detail.value
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (!this.$u.test.mobile(this.mobile)) {
						this.$u.toast('请输入正确的手机号！')
						return;
					}
					// 接口 发送验证码
					const res =await this.$u.api.verificationCode({phone:this.mobile})
					console.log(res);
					this.realCode=res.data
					
					setTimeout(() => {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				}
			},
			async toNext() {
				if(this.time===1){
					// console.log(this.vuex_user.phone);
					/* 验证一下验证码 */
					if(this.code!=this.realCode){
						this.$u.toast('验证码错误！请重新输入！')
						return;
					}
					if(this.mobile!=this.vuex_user.phone){
						this.$u.toast('旧手机号输入错误！')
						return;
					}
					// const res=await this.$u.api.oldPhone({
					// 	id:this.vuex_user.id,
					// 	phone
					// })
					this.mobile=''
					this.code=''
					this.$refs.uCode.reset();
					this.tips="获取验证码"
					this.time=2
				}else{
					/* 验证一下验证码 */
					if(this.code!=this.realCode){
						this.$u.toast('验证码错误！请重新输入！')
						return;
					}
					const res=await this.$u.api.updatePhone({
						id:this.vuex_user.id,
						newPhone:this.mobile
					})
					res.success?this.$back(1):this.$u.toast(res.msg)
					console.log(res);
				}
			},
		}
	}
</script>

<style>
	.item {
		margin: 30rpx 80rpx;
		border-radius: 10rpx;
		padding: 17rpx;
	}

	.item image {
		width: 30rpx;
		margin-right: 20rpx;
	}

	.item input {
		border-left: 4rpx solid #FFFFFF;
		padding-left: 20rpx;
	}

	.input-placeholder {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.getCode {
		white-space: nowrap;
		border-left: 4rpx solid #FFFFFF;
		padding-left: 10rpx;
		font-size: 28rpx;
	}

	.btn {
		margin: 100rpx 80rpx;
	}
</style>
